<!--
 * @Author: chentao 294446993@qq.com
 * @Date: 2022-12-29 14:29:41
 * @LastEditors: chentao 294446993@qq.com
 * @LastEditTime: 2023-04-13 10:36:22
 * @FilePath: \desktop\frontend\src\components\dialog\dialogUserDetail.vue
 * @Description: 查看用户详情
-->
<template>
    <el-dialog v-model="dialogVisible" width="360" height="170" destroy-on-close :title="title" center
        custom-class="dialog-container" :before-close="close">
        <div class="container">
            <div class="title-line">
                <img :src="msgRightUserInfoItem.img" class="icon" />
                <span class="nickname">{{ msgRightUserInfoItem.nickname }}</span>
            </div>
            <div class="content">
                <div class="content-form-item">
                    <span>备注名称:</span>
                    <!-- <img class="more-img" src="@/assets/images/icon-more@2x.png" alt="" /> -->
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <button class="add-manager" @click="goToChat" v-if="isFriend">sendMsg</button>
                <button class="add-manager" @click="goToChat" v-else>addFriend</button>
            </span>
        </div>
    </el-dialog>
</template>

<script>
import {
    defineComponent,
    computed,
    watch,
    onMounted,
    onBeforeUnmount,
    ref,
    toRefs,
    reactive
} from 'vue'
import { useStore } from "vuex";
import { ElMessage } from 'element-plus'
import {
    ADD_GROUP_MANAGER_LIST,
    PANEL_HEADER_LIST_VISIBLE,
    PANEL_HEADER_LIST_VISIBLE_OPEN,
    BATCH_REMOVE_MANAGER,
    QUERY_GROUP_MANAGER_LIST,
    UPDATE_GROUP_MANAGER_LIST,
    FETCH_GROUP_MEMBER_LIST,
    DIALOG_BANNED_LIST_VISIBLE,
    UPDATE_BANNED_LIST,
    CHAT_SELECTION_BANNED_BOX_VISIBLE,
    UPDATA_USER_GAG,
    DIALOG_MSG_USER_DETAIL_VISIBLE,
    DIALOG_ADD_FRIEND_VISIBLE
} from "@/store/actiontypes";
import { handleMemberName } from '@/utils/chat'
export default defineComponent({
    props: {
        title: {
            type: String,
            default: '',
        },
    },
    setup() {
        const store = useStore();
        let dialogVisible = ref(false)
        let isFriend = ref(false)
        let msgRightUserInfoItem = reactive({
            nickname: '',
            img: '',
            remark: ''
        })
        const close = () => {
            store.commit(DIALOG_MSG_USER_DETAIL_VISIBLE, { dialogMsgUserDetailVisible: false })
        }
        const dialogMsgUserDetailVisible = computed(() => store.state.dialogue.dialogMsgUserDetailVisible)
        watch(dialogMsgUserDetailVisible, (newVal) => {
            dialogVisible.value = newVal
        }, { immediate: true })
        const userInfo = computed(() => store.state.user)
        let msgRecordItem = computed(() => store.state.chat.msgRecordItem)
        watch(msgRecordItem, (newVal) => {
            if (newVal && Object.keys(newVal).length > 0) {
                if (newVal.sendType === 'GROUP') {
                    const friendList = store.state.chat.friendList
                    const groupMemberList = store.state.chat.groupMemberList
                    //群聊
                    //如果在联系人能找到就是好友
                    if (friendList) {
                        const friendItem = friendList.find((fItem) => {
                            return fItem.userId === newVal.from
                        })
                        ///如果联系人找到了
                        if (friendItem) {
                            msgRightUserInfoItem.nickname = friendItem.nickname
                            msgRightUserInfoItem.remark = friendItem.nickname
                            msgRightUserInfoItem.img = friendItem.img
                            isFriend.value = true //是好友
                        } else {
                            isFriend.value = false  //不是好友
                            const gItem = groupMemberList.find((gItem) => gItem.userId === newVal.from)
                            if (gItem) {
                                msgRightUserInfoItem.nickname = gItem.nickname
                                msgRightUserInfoItem.remark = handleMemberName(gItem)
                                msgRightUserInfoItem.img = gItem.img
                            }
                        }
                    }
                }
                msgRecordItem = newVal
            }
        }, { immediate: true, deep: true })

        const goToChat = () => {
            if (isFriend) {
                //toChat("PRIVATE", msgRecordItem.from);
            } else {
                store.commit(DIALOG_ADD_FRIEND_VISIBLE, {
                    dialogAddFriendVisible: true
                })
            }
            close()
        }
        return {
            dialogVisible,
            msgRightUserInfoItem,
            msgRecordItem,
            isFriend,
            close,
            goToChat
        }
    },
})
</script>
<style lang="less" scoped>
.el-dialog__title {
    font-size: 13px;
    color: #303133;
    font-weight: 500;
}

// dialog下面的body
// .el-dialog__body 跟custom-class属于同一个元素
.el-dialog .el-dialog__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding-left: 0px !important;
    padding-right: 0px !important;

    .container {
        width: 200px !important;
        height: 170px !important;
        display: flex;
        flex-direction: column;
        flex: 1;
        cursor: default;
        position: relative;
        padding: 0px;

        .title-line {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 60px;

            .icon {
                width: 44px;
                height: 44px;
                border-radius: 3px;
            }

            .nickname {
                margin-left: 10px;
            }
        }

        .content {
            display: flex;
            flex-direction: column;
            flex: 1;

            .content-form-item {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                margin-top: 10px;

                .more-img {
                    width: 16px;
                    height: 16px;
                    cursor: pointer;
                    margin-right: 10px;
                }
            }
        }

        .dialog-footer {
            width: 100%;
            height: 60px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            position: absolute;
            bottom: 0;

            .add-manager {
                width: 130px;
                height: 26px;
                background-color: #5083FC;
                border-radius: 2px 2px 2px 2px;
                // border-color: #5083FC;
                border: none;
                opacity: 1;
                margin-bottom: 30px;
                font-size: 14px;
                text-align: center;
                font-weight: 400;
                color: #fff;
                cursor: pointer;
                //outline: none;
                // -webkit-background-clip: text;
            }

        }
    }
}</style>